<template>
  <div class="reg-auth-user">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: false, resize: false }"
      :visible="true"
      :close-on-click-modal="false"
      @close="closeMd"
      :title="`注册/认证用户`"
      width="500px">
      <div class="tip-text">注意：如果您是单位员工 ，请联系管理员添加员工账号再来登陆！无需认证新单位！</div>
      <el-form :model="fm.ps" :ref="fm.fname"
        @keyup.enter.native="onSubmit" 
        :label-width="'100px'">
        <el-form-item 
          label="认证角色"
          prop="userRole"
          :rules="[{ required: true, message: '请选择认证角色', trigger: 'change' }]">
          <el-select 
            v-model="fm.ps.userRole.value"
            placeholder="请选择认证角色"
            style="width: 300px;">
            <el-option label="车队" value="TEAM"></el-option>
            <el-option label="旅行社" value="TRAVEL"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item 
          label="用户电话"
          prop="userPhone"
          :rules="[
            { required: true, message: '请输入用户电话', trigger: ['blur', 'change'] },
            this.$rules.isPhone('用户电话格式错误')
          ]">
          <el-input 
            v-model="fm.ps.userPhone" 
            placeholder="请输入用户电话" 
            maxlength="11"
            :disabled="myData.obj ? true : false"
            style="width: 300px;">
          </el-input>
        </el-form-item>

        <el-form-item 
          label="用户姓名"
          prop="userName"
          :rules="[
            { required: true, message: '请输入用户姓名', trigger: ['blur', 'change'] },
          ]">
          <el-input 
            v-model="fm.ps.userName" 
            placeholder="请输入用户姓名" 
            maxlength="15"
            style="width: 300px;">
          </el-input>
        </el-form-item>

        <el-form-item 
          :label="fm.ps.userRole.value == 'TEAM' ? '车队名称' : '旅行社名称'"
          prop="companyName"
          :rules="[
            { required: true, message: fm.ps.userRole.value == 'TEAM' ? '请输入车队名称' : '请输入旅行社名称', trigger: ['blur', 'change'] },
          ]">
          <el-input 
            v-model="fm.ps.companyName" 
            :placeholder="fm.ps.userRole.value == 'TEAM' ? '请输入车队名称，如：客车帮车队' : '请输入旅行社名称，如：客车帮旅行社'" 
            maxlength="50"
            style="width: 300px;">
          </el-input>
        </el-form-item>

        <el-form-item
          :label="fm.ps.userRole.value == 'TEAM' ? '车队位置' : '旅行社位置'"
          prop="companyAddr.name"
          :rules="[
            { required: true, message: fm.ps.userRole.value == 'TEAM' ? '请选择车队位置' : '请选择旅行社位置', trigger: 'blur' },
          ]">
          <MapPointInp
            :name="'companyAddr'"
            :placeholder="fm.ps.userRole.value == 'TEAM' ? '请选择车队位置，如：天府广场' : '请选择旅行社位置，如：天府广场'"
            :defPoint="fm.ps.companyAddr"
            @handleSel="setPoint"
            style="width: 300px;"/>
        </el-form-item>

        <div v-for="(obj, index) in fm.ps.dutyService" :key="index" class="flex">
          <div>
            <el-form-item 
              label="操作员" 
              :prop="`dutyService.${index}.name`" 
              required
              :rules="[ {required: true, message: '姓名不能为空', tigger: 'blur'} ]">
              <el-input 
                v-model="obj.name" 
                placeholder="操作员姓名"
                style="width: 110px">
              </el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item 
              label="手机号" 
              label-width="80px"
              :prop="`dutyService.${index}.phone`" 
              required
              :rules="[ {required: true, message: '手机号不能为空', tigger: 'blur'}, $rules.isPhone('手机号格式错误') ]">
              <el-input 
                v-model="obj.phone" 
                placeholder="操作员手机号"
                maxlength="11"
                style="width: 110px; margin-right: 10px;">
              </el-input>
            </el-form-item>
          </div>

          <div>
            <el-button  
              v-if="index == 0"
              type="primary" 
              icon="el-icon-plus" 
              circle 
              title="点击添加一项"
              @click="addItem">
            </el-button>
            
            <el-button 
              v-if="index != 0"
              type="danger" 
              icon="el-icon-delete" 
              circle 
              title="点击删除一项" 
              @click="delItem(index)">
            </el-button>
          </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button 
          type="primary" 
          :icon="'el-icon-check'" 
          @click="onSubmit" 
          :loading="fm.sb.load">
          立即提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";

import MapPointInp from '@/components/MapPointInp';

import * as loginSer from '@/api/services/login.service';

export default {
  name: 'RegAuthUser',
  directives: { elDragDialog },
  components: { MapPointInp },
  props: { myData: Object },
  data() {
    return {
      fm: {// 表单数据对象
        fname: "regAuthUserFm",
        sb: { load: false },
        ps: {
          // 用户角色
          userRole: {value: 'TRAVEL', label: '旅行社'},
          // 用户电话
          userPhone: (this.myData.obj && this.myData.obj.authPhone) || '',
          // 用户姓名
          userName: (this.myData.obj && this.myData.obj.authName) || '',
          // 车队/旅行社名称
          companyName: '',
          // 车队/旅行社位置
          companyAddr: {              
            name: '',        // 地址详情 成都市 天府广场
            area: '',           // 地址简称 四川省-成都市-武侯区
            lnglat: '',         // 地点坐标 140.xxxxxx,30.xxxxxx
          },
          // 操作员数组（默认一个）
          dutyService: [
            {
              name: (this.myData.obj && this.myData.obj.authName) || '', 
              phone: (this.myData.obj && this.myData.obj.authPhone) || '',
            }
          ],
        },
      },

    }
  },
  methods:{
    closeMd() {
      this.$emit("myClick", {state: false});
    },
    // 选择地点后的回调函数
    setPoint(e){
      let that = this, U = that.U, fm = that.fm, ps = fm.ps;
      console.log('地点子组件传入的数据', e);
      if(e.p){
        ps[e.name] = {
          name: e.p.name,     // 地址详情 成都市 天府广场
          area: e.p.area,     // 地址简称 四川省-成都市-武侯区
          lnglat: e.p.lnglat, // 地点坐标 140.xxxxxx,30.xxxxxx
        };

        // 对应点不为空，则取消验证
        if(ps[e.name].name) U.clearFmVali(that, fm.fname, `${e.name}.name`);
      }else{// 设置地点为空
        ps[e.name] = {
          name: '',     // 地址详情 成都市 天府广场
          area: '',     // 地址简称 四川省-成都市-武侯区
          lnglat: '',   // 地点坐标 140.xxxxxx,30.xxxxxx
        };
      }
    },
    // 添加一项
    addItem(){
      if(this.fm.ps.dutyService.length > 4){
        this.U.qerror(`最多只能添加5个操作员`);
      }else{
        this.fm.ps.dutyService.push({name: null, phone: null});
      }
    },
    // 删除一项
    delItem(index){
      this.fm.ps.dutyService.splice(index, 1);
    },
    // 提交表单
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb, ps = U.scopy(fm.ps);
      console.log('初始提交参数', ps);
      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          sb.load = true;

          // 处理参数
          let p = {};
          // 认证角色
          p.companyRole = ps.userRole.value;
          // 用户电话
          p.unitPhone = ps.userPhone;
          // 用户名称
          p.unitRealName = ps.userName;
          // 车队/旅行社名称
          p.unitName = ps.companyName;
          // 车队/旅行社位置
          p.position = `${ps.companyAddr.area}-${ps.companyAddr.name}`;
          // 车队/旅行社坐标
          p.lonAndLat = ps.companyAddr.lnglat;
          // 操作员数组
          p.dutyService = ps.dutyService;

          console.log('最终提交的参数对象', p);
          loginSer.regAuthUser(p).then((res) => {
            sb.load = false;

            if (res.code != 1) {
              U.qerror(res.msg);
            } else {
              U.qsuccess(res.msg);

              // 关闭弹框
              that.closeMd();

              // 调用父组件方法-重新加载数据
              that.$emit("reloadDg");
            }
          });

          setTimeout(() => { sb.load = false; }, 10000);
        }
      });
    },
    
  },
 }
</script>
<style lang="less" scoped>
.reg-auth-user{
  .tip-text{
    font-size: 14px;
    color: #ff6300;
    padding: 5px 20px 15px 20px;
  }
}
</style>